<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #container{
        border:1px solid black;
        background: #0ad292;
        width:300px;
        height:300px;
        position:absolute;
        border-radius: 2%;
        right: 10px;
        bottom: 10px;
        opacity:0;
        transition: all 2s;
    }
    #container #title {
        border-radius: 5%;
        font-size: 18px;
        border: 1px solid black;
        background: #4ca2ea;
        width: 300px;
        height: 30px;
        position: relative;
        opacity:0;
        transition: all 2s;
    }
    #container #title #btn_close{
        font-size: 19px;
        width:30px;
        height:30px;
        background: rgba(215, 115, 115, 0.95);
        border-radius: 20%;
        float: right;
        text-align: center;
        display: inline-block;}
    #container #title #btn_close:hover{
        cursor: pointer;
        opacity: 0.6;
    }
    #container #title #title:hover{
        cursor: pointer;
        opacity: 0.6;}
  </style>
</head>
<body>
    <div id="container">
      <div class="" id="title">广告标题<span id="btn_close">&times;</span></div>
      <div class="" id="advertising"></div>
    </div>
<script type="text/javascript">
    //获取title
    let title = document.getElementById("title");
    //获取关闭按键
    let btn_closed = document.getElementById("btn_close");
    //获取广告容器container
    let container = document.getElementById("container");
    //关闭事件
    btn_closed.addEventListener("click",function () {
        //container.style.display = 'none';
        container.style.opacity = 0 ;
        title.style.opacity = 0 ;
    },false)

    //淡入淡出效果
    setTimeout(show, 1000);
    function show() {
        container.style.opacity = 1;
        title.style.opacity = 1 ;
    }

    //首先调用,实时检测窗体大小 进行修改
    reload();
    //根据窗口大小 改变广告的大小
    window.onresize = function () {reload();};
    function reload(){
        // 获取 窗体的的大小
        let clientHeight = document.documentElement.clientHeight;
        let clientWidth = document.documentElement.clientWidth;
        //如果窗口小于某个数值后就修改广告container的大小
        if (clientWidth < 800 || clientHeight < 500) {
            container.style.height = '150px';
            container.style.width = '150px';
            title.style.width = '150px';
        } else {
            container.style.height = '300px';
            container.style.width = '300px';
            title.style.width = '300px';
        }
    }
</script>
</body>
</html>
